<template>
  <div class="info">
    <div>
      <label>用户名：</label>
      <p>{{ user.name }}</p>
      <el-button size="mini" @click="handleChangeUserName">修改用户名</el-button>
    </div>
    <div>
      <label>手机号：</label>
      <p>{{ user.tel }}</p>
      <el-button size="mini" @click="handleGoChangePhone">修改手机号</el-button>
    </div>
    <edit-name :open="open" @cancel="cancel" ref="child" />
  </div>
</template>

<script>
import editName from "./edit-name";
export default {
  props: {
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      open: false,
      user: this.$store.state.user.userInfo,
    };
  },
  components: {
    editName,
  },
  created() {},
  methods: {
    cancel() {
      this.open = false;
    },
    handleChangeUserName() {
      this.open = true;
    },
    handleGoChangePhone() {
      this.$router.push("/setting/changePassword");
    },
  },
};
</script>

<style scoped lang="scss">
.info div {
  display: flex;
  font-size: 14px;
  align-items: center;
  margin-bottom: 22px;
  label {
    width: 100px;
  }
  p {
    margin-right: 15px;
  }
}
</style>
